<script >
import {listAll} from "@/api/kong/group";
import {goLive} from "@/api/kong/kong";
export default {
  data() {
    return {
      checkAll: false,
      checkedCities: [],
      isIndeterminate: false,
      groupList:[],
      formData:{
        groupNames:[],
        params: {},
        cmdSetGid:12
      },
      sumbmitLoading:false
    };
  },
  created() {
    this.groups();
  },
  methods: {
    handleCheckAllChange(val) {
      this.formData.groups = val ? this.groupList.map(item => item.groupName) : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.groupList.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.groupList.length;
    },
    goLive(value){

    },
    groups(keyword){
      const queryParams = {keyword:keyword};
      listAll(queryParams).then(response => {
          this.groupList = response.data;
      }).finally(() =>{
      });
    },
    onSubmit(){
      if(this.formData.groupNames.length===0){
        this.$modal.msgError("请选择要执行的组");
        return;
      }
      this.sumbmitLoading = true;
      goLive(this.formData).then(response => {
        this.$modal.msgSuccess("命令发送成功");
      }).finally(() =>{
        this.sumbmitLoading = false
      });
    }
  }
};
</script>

<template>
  <div class="setcmd">
    <el-form ref="form" model="formData" label-width="120px">
      <el-form-item label="选择执行组" required>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <el-checkbox-group v-model="formData.groupNames" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="city in groupList" :label="city.groupName" :key="city.gid" :value="city.groupName">{{city.groupName}}({{city.totalNum}})</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit()" :loading="sumbmitLoading">一键返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="scss">
.setcmd{
  margin: 10px;
}
</style>
